<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品分类</title>
<!-- css 样式引入 -->
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap-table.css" />
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css">
<!-- js引入 -->
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/bootstrap-table.js"></script>
<script type="text/javascript" src="../../js/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript"
	src="../../js/bootstrap-datetimepicker.js"></script>
<script src="js/categories.js"></script>

</head>

<body>
	<!-- 标题 -->
	<table class="btbHead">
		<tr>
			<td style="width: 25%;"><i class="fa fa-align-justify"></i>&nbsp;商品分类</td>
			<td style="text-align: right;"><a href="#" id="addBtn"
				class="btn btn-info" data-toggle="modal" data-target="#addModal"><i
					class="fa fa-plus"></i>&nbsp;添加</a></td>
		</tr>
	</table>

	<!-- 模糊查询条件 -->
	<form role="form" class="form-inline searchForm">
		<div class="form-group">
			<label for="name">查询条件</label> <input type="text"
				class="form-control" id="keyWord" placeholder="请输入分类名称"
				style="width: 250px;"> <a href="javascript:doQuery()"
				class="btn btn-default"><i class="fa fa-search"></i></a>
		</div>
	</form>

	<div class="slideLine" style="margin-top: 10px; margin-bottom: 10px;"></div>

	<!-- 数据表格 -->
	<table data-toggle="table" id="dataTable" data-pagination="true">
		<thead>
			<tr>
				<th data-field="id" data-align="center">分类编号</th>
				<th data-field="classname">分类名称</th>
				<th data-field="parentId">父级分类编号</th>
				<th data-field="isParent" data-formatter="parentFormatter">是否是父级</th>
				<th data-field="createTime" data-formatter="dateFormatter">创建时间</th>
				<th data-field="opraite" data-formatter="operateFormatter">操作</th>
			</tr>
		</thead>
	</table>

	<!--模态框-->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 450px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">新增商品分类</h4>
				</div>
				<div class="modal-body" id="iptBox">
					<form class="form-horizontal form-inline commitForm" id="addForm"
						role="form">
						<table width="100%">
							<tr>
								<!-- <td style="text-align: right;width: 25%;">
									分类编号
								</td>
								<td>
									<input id="" class="form-control" name="classId" type="text" value="" style="width:100%">
								</td> -->
							</tr>
							<tr>
								<td style="text-align: right; width:;"><span>分类名称</span></td>
								<td><input id="" class="form-control" name="classname"
									type="text" value="" style="width: 100%"></td>
							</tr>
							<tr>
								<td style="text-align: right;"><span>父级分类编号</span></td>
								<td><input id="userCode" class="form-control"
									name="parentId" type="text" value="" style="width: 100%">
								</td>
							</tr>

							<tr>
								<td style="text-align: right;"><span>是否是父级</span></td>
								<td colspan=""><select name="isParent">
										<option value="1">是父级</option>
										<option value="0">不是父级</option>
								</select></td>
							</tr>

						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" class="btn btn-primary" onclick="add()"
						id="btnSave">确定</button>
				</div>
			</div>
			<!-- /.modal-content-->
		</div>
		<!--/.modal -->
	</div>

	<!--修改模态框-->
	<div class="modal fade" id="modifyModal" tabindex="-1" role="dialog"
		aria-labelledby="modifyModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 900px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改分类信息</h4>
				</div>
				<div class="modal-body" id="iptBox">
					<form class="form-horizontal form-inline commitForm"
						id="modifyForm" role="form">
						<table width="100%">
							<tr>
								<td style="text-align: right; width: 12%;"><span>分类编号</span>
								</td>
								<td><input id="m_id" class="form-control" name="id"
									type="text" style="width: 100%" value="" readonly="true"></td>
								<td style="text-align: right; width: 12%;">分类名称</td>
								<td><input id="m_classname" class="form-control"
									name="classname" type="text" value="" style="width: 100%"></td>
								<td style="text-align: right; width: 12%;">父级分类编号</td>
								<td><input id="m_parentId" class="form-control"
									name="parentId" type="text" value="" style="width: 100%"></td>
							</tr>
							<tr>
								<td style="text-align: right; width:;"><span>是否是父级</span></td>
								<td><select id="m_isParent" class="form-control"
									name="isParent" style="width: 100%">
										<option value="0">是</option>
										<option value="1">不是</option>
								</select></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消
					</button>
					<button type="button" class="btn btn-primary" id="btnSave"
						onclick="modify()">确定</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 信息删除确认 -->
	<div class="modal fade" id="delModel">
		<div class="modal-dialog">
			<div class="modal-content message_align">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">提示信息</h4>
				</div>
				<div class="modal-body">
					<p>您确认要删除吗？</p>
				</div>
				<div class="modal-footer">
					<input type="hidden" id="cid" />
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<a onclick="remove()" class="btn btn-success" data-dismiss="modal">确定</a>
				</div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">
	//删除模态框事件监听
	$('#delModel').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget)
		var cid = button.data('cid')
		var modal = $(this)
		$("#cid").val(cid);
	})
	
		// 修改模态框监听
	$('#modifyModal').on('show.bs.modal', function(event) {
		var button = $(event.relatedTarget)
		var classname = button.data('classname')
		var isParent = button.data('isparent')
		var parentId = button.data('parentid')
		var id = button.data('id')
		var modal = $(this)
		modal.find('#m_classname').val(classname);
		modal.find('#m_isParent').val(isParent);
		modal.find('#m_parentId').val(parentId);
		modal.find('#m_id').val(id);
	});
</script>
</html>